
<!-- 编辑器 -->
<tinymce-editor>

  <style scoped>
  [aria-label]:hover:after, [aria-label]:focus:after {
    display: none;
  }
  </style>

  <textarea>{content}</textarea>

  <script>
  var tag = this;
  tag.content = opts.content || '';
  tag.getContent = function(){
    return tinymce.activeEditor.getContent();
  };
  tag.fn = {
    setContent: function(content){
      var eda = tinymce.activeEditor;
      eda.setContent(content);
      eda.selection.select(eda.getBody(), true);
      eda.selection.collapse(false);
      eda.focus();
    },
    insertContent: function(content){
      tinymce.activeEditor.insertContent(content);
    }
  };
  tag.on('mount', function(){
    pip.load(tag.app.data.tinymce)
    .on('done', function(){
      tinymce.init({
        selector: "textarea",
        width: opts.w,
        height: opts.h,
        language: "zh_CN",
        menubar: false,
        plugins: ['textcolor colorpicker image lists'],
        toolbar: 'undo redo | styleselect | forecolor backcolor | bullist numlist outdent indent | link | image',
        statusbar: false,
        forced_root_block : "",
        force_br_newlines : true,
        force_p_newlines : false,
        init_instance_callback: function(ed){
          ed.on('change keyup', function(e){
            var pos = ed.selection.getRng().getClientRects()[0];
            opts.onUpdate &&
            opts.onUpdate(opts.item||e, {
              edit: ed,
              pos: {
                x: pos && pos.left || 0,
                y: pos && pos.top || 0
              }
            });
          });
        }
      });
    });
  });
  </script>
</tinymce-editor>


<!-- 弹出框 -->
<utils-modal>
  <style scoped>
  .modal-mask{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .4;
  }
  .modal-container{
    position: fixed;
    left: 50%;
    box-shadow: 0 0 10px #666;
    background: #fff;
    border-radius: 5px;
  }
  .modal-container .header{
    height: 40px;
    border-bottom: 1px solid #ebebeb;
    position: relative;
  }
  .modal-container .header h3{
    text-align: center;
    line-height: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
  }
  .modal-container .header a{
    position: absolute;
    right: 15px;
    top: 13px;
    font-size: 14px;
    color: #ccc;
  }
  .modal-container .header a:hover{ border: none }
  .modal-container .content{
    text-align: center;
    padding: 20px;
    min-height: 60px;
  }
  .modal-container .btn-group{
    height: 50px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
  }
  .modal-container .btn-group button{
    width: 90px;
    margin: 0 15px;
  }
  </style>

  <!-- 弹窗主体 -->
  <div if="{open}" class="modal-container {animation: open}"
    style="width: {opts.w||360}px; height: {opts.h||200}px; z-index: {opts.z?Number(opts.z)+11:22}; top: {opts.top||'30%'}; margin-left: {opts.w?'-'+Number(opts.w/2):-180}px">
    <div class="header">
      <h3><yield from="title"/></h3>
      <a href="javascript:;" onclick={fn.close}><i class="icon-cancel"></i></a>
    </div>
    <div class="content">
      <yield from="content"/>
    </div>
    <div class="btn-group">
      <yield from="button"/>
      <button type="button" class="btn-gray" onclick={fn.close}>
        <yield from="close"/>
      </button>
    </div>
  </div>

  <!-- 遮罩层 -->
  <div if={open} onclick={fn.close}
    style="opacity: {opts.mask}; z-index: {opts.z||11}"
    class="modal-mask"></div>

  <script>
  var tag = this;
  tag.open = false;
  tag.fn = {
    close: function(){
      tag.update({
        open: false
      });
    },
    open: function(){
      tag.open = true;
      document.addEventListener('keydown', function(e){
        if(e.keyCode == 27) tag.fn.close();
      }, {once: true});
      tag.update();
    }
  };
  </script>
</utils-modal>

<qiniu-upload>

  <button onclick={fn.select} ref="uploadBtn">选择文件</button>

  <script>
  var tag = this;
  tag.cf = {
    // 多个文件上传
    multiple: opts.multiple || false,
    // 允许上传的文件类型accept=".jpg,.gif.."
    accept: opts.accept.split(','),
    // 上传需要的token
    token: opts.token,
    // 上传重试次数
    retry: opts.retry || 1,
    // debug
    debug: opts.debug || false,
    // domain 上传域名
    domain: opts.domain,
    // 上传域名下的子目录
    folder: opts.folder || 'dev/temp'
  };
  // 上传成功or失败的文件列表
  tag.uploadedList = [];
  tag.failedList = [];
  tag.fn = {
    select: function(){
      if(!tag.qiniu){
        return alert('还在初始化中稍后点击');
      }
      tag.qiniu.chooseFile();
    }
  };
  tag.on('mount', function(){
    // 加载qiniu sdk
    pip.load(tag.app.data.qiniu)
    .on('done', function(){
      tag.qiniu = new Qiniu.UploaderBuilder()
      .debug(tag.cf.debug)
      .domain('http://upload.qiniu.com/')
      .retry(tag.cf.retry)
      .multiple(tag.cf.multiple)
      .accept(tag.cf.accept)
      .tokenFunc(function(setToken){
        setToken(tag.cf.token);
      })
      .listener({
        onReady: function(task){
          tag.refs.uploadBtn.disabled = true;
          opts.onReady && opts.onReady(task);
        },
        onStart: opts.onStart || function(){},
        onTaskProgress: opts.onProgress || function(){},
        onTaskGetKey: function(task){
          var
            file = btoa(
              task.file.name +
              task.file.size +
              task.file.lastModified
            ),
            ext = task.file.name.split('.').pop();
          return tag.cf.folder+'/'+file+'.'+ext;
        },
        onTaskSuccess: function(task){
          tag.uploadedList.push({
            name: task.file.name,
            url: tag.cf.domain+'/'+task.result.key
          });
          opts.onSuccess &&
          opts.onSuccess(tag.uploadedList, opts.item||{});
        },
        onTaskRetry: opts.onRetry || function(){},
        onTaskFail: function(task){
          tag.failedList.push({
            name: task.file.name
          });
          opts.onFail &&
          opts.onFail(task, tag.failedList);
        },
        onFinish: function(task){
          tag.refs.uploadBtn.disabled = false;
          opts.onFinish && opts.onFinish(task);
        }
      }).build();
    });
  });
  </script>

</qiniu-upload>


<!--
opts.pages: 总页数
opts.page: 当前页
opts.span: 前后页显示范围
opts.onChange
-->
<pagination-number>

  <ul class="pagination">
    <li show={hasPrevPage}>
      <a href="javascript:;" onclick={fn.jumpPage}>1</a>
    </li>
    <li show={hasPrevPage}>
      <a href="javascript:;" onclick={fn.prevPage}>
        &lt;
      </a>
    </li>
    <li show={hasPrevSpan}>...</li>
    <li each={p in prevPages}>
      <a href="javascript:;" onclick={fn.jumpPage}>{p}</a>
    </li>
    <li class="active">
      <a href="javascript:;">{page}</a>
    </li>
    <li each={p in nextPages}>
      <a href="javascript:;" onclick={fn.jumpPage}>{p}</a>
    </li>
    <li show={hasNextSpan}>...</li>
    <li if={hasNextPage}>
      <a href="javascript:;" onclick={fn.nextPage}>
        &gt;
      </a>
    </li>
    <li show={hasNextPage}>
      <a href="javascript:;" onclick={fn.jumpPage}>{pages}</a>
    </li>
    <li class="select" if="{opts.select=='y'}">
      跳转至
      <span if="{pageList.length<100}">
        <select onchange="{fn.jumpPage}">
          <option each="{p in pageList}" value="{p}" selected="{p==page}">{p}</option>
        </select>
      </span>
      <input if="{pageList.length>=100}"
        onchange="{fn.jumpPage}" type="number" value="{page}">
       / {pages}页
    </li>
  </ul>
  <script>
  var tag = this;
  tag.pageSpan = Number(opts.span || 4);
  tag.pageList = [];
  tag.fn = {
    pageList: function() {
      tag.pageList = [];
      for(var page = 1; page <= tag.pages; page++){
        tag.pageList.push(page);
      }
    },
    prevPages: function() {
      var i = tag.pageSpan;
      tag.hasPrevSpan = (tag.page - tag.pageSpan) > 0;
      tag.prevPages = [];
      while(i--){
        if(tag.page - i > 1 && i > 0){
          tag.prevPages.push(tag.page - i);
        }
      }
    },
    nextPages: function() {
      var i = 0;
      tag.hasNextSpan = (tag.page + tag.pageSpan) < tag.pages;
      tag.nextPages = [];
      while(++i < tag.pageSpan){
        if(tag.page + i < tag.pages){
          tag.nextPages.push(tag.page + i);
        }
      }
    },
    // 跳转页
    jumpPage: function(e) {
      tag.fn.page(Number(
        e.item ? e.item.p :
        e.target.value || e.target.innerText
      ));
    },
    // 上一页
    prevPage: function() {
      if(tag.hasPrevPage)
      tag.fn.page(tag.page - 1);
    },
    // 下一页
    nextPage: function() {
      if(tag.hasNextPage)
      tag.fn.page(tag.page + 1);
    },
    pageCount: function(){
      tag.hasNextPage = tag.pages > tag.page;
      tag.hasPrevPage = tag.page > 1;
      tag.fn.prevPages();
      tag.fn.nextPages();
    },
    // 切换页面
    page: function(n) {
      opts.onChange && opts.onChange(n);
    },
    // 渲染
    render: function(){
      tag.page = Number(opts.page || 1);
      tag.pages = Number(opts.pages || 1);
      tag.fn.pageList();
      tag.fn.pageCount();
    }
  };
  tag.on('mount', function(){});
  tag.on('update', function(){
    tag.fn.render();
  });
  </script>

</pagination-number>



<input-color>
  <input type="text" ref="color" value="{opts.v}">
  <script>
  var tag = this;
  tag.fn = {};
  tag.on('mount', function(){
    new jscolor(tag.refs.color, {
      hash: true,
      onFineChange: function(){
        opts.onChange(opts.item, this.toHEXString());
      }
    })
  });
  </script>
</input-color>



<utils-raw>
  <script>
  var tag = this;
  tag.fn = {};
  tag.on('mount', function(){
    tag.root.innerHTML = opts.content;
  });
  tag.on('update', function(){
    tag.root.innerHTML = opts.content;
  });
  </script>
</utils-raw>
